<template>
  <div>
    <div class="main" style="height: 100%;" v-on:click.self="unSelect">
      <template v-for="(item,index) in list">
        <vue-draggable-resizable :w="item.width*zoomX || 200" :h="item.height*zoomY || 200" :parent="true" :draggable="draggable" :resizable="resizable" :grid="[100,100]" :x="item.x*zoomX" :y="item.y*zoomY" :class="index===currentEditIndex?'active':'normal'" v-on:dragging="onDrag" v-on:resizing="onResize" @activated="onActivated(index)" @deactivated="onDeactivated(index)">
          <div :is="item.chart.type" ref="chart" :w="item.width" :h="item.height" :typesFile="item.chart.typesFile" :datas="$parent.datas" :axis="item.axis" :value="item.value"></div>
          <div v-show="index===currentEditIndex" class="opt">
            <el-button type="danger" @click="del(index)">删除</el-button>
          </div>
        </vue-draggable-resizable>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: ['list', 'currentEditIndex', 'resizable', 'draggable', 'status'],
  data() {
    return {

    }
  },
  computed: {
    zoomX: function() {
      let parentWidth = this.$parent.$refs.canvas.$el.clientWidth
      window.console && console.log(parentWidth);
      return parentWidth / 711
    },
    zoomY: function() {
      let parentHeight = this.$parent.$refs.canvas.$el.clientHeight
      return parentHeight / 408
    },
  },
  methods: {
    del(index) {
      window.console && console.log(index);
      this.$parent.canvasItems.splice(index, 1)
      this.$parent.currentEditIndex = ''
    },
    unSelect(e) {
      this.$parent.currentEditIndex = ''
    },
    select(index) {
      this.$emit('select', index)
    },
    onResize: function(x, y, width, height) {
      let obj = this.$parent.canvasItems[this.currentEditIndex]
      window.console && console.log(x, y, width, height)
      if (obj) {
        this.$set(obj, 'width', width)
        this.$set(obj, 'height', height)
          // obj.width = width
          // obj.height = height
      }
    },
    onDrag: function(x, y) {
      let obj = this.$parent.canvasItems[this.currentEditIndex]
      if (obj) {
        obj.x = x
        obj.y = y
      }
    },
    onActivated: function(index) {
      if (this.status === 'edit' || this.status === 'add') {
        this.$parent.currentEditIndex = index
      }
    },
    onDeactivated: function() {
      // this.$parent.currentEditIndex = ''
    },
  },
  created() {

  },
  components: {
    VueDraggableResizable: resolve => require(['vue-draggable-resizable'], resolve),
    elTable: resolve => require(['./chart/table'], resolve),
    highchart: resolve => require(['./chart/highchart'], resolve),
    contextMenu: resolve => require(['vue-context-menu'], resolve),
  },
}
</script>
<style lang="less" scope>
.main {
  .normal {
    border: 1px solid #fff
  }
  .active {
    border: 1px solid #999
  }
  .opt {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    .el-button {
      padding: 0;
      span {
        line-height: 24px;
        color: #fff;
      }
    }
  }
}
</style>
